<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专家详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height  //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0  //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0  //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no  //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）
    -->
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="{{asset('zhuanjia/font-awesome-4.7.0/css/font-awesome.css')}}">
    <link rel="stylesheet" href="{{asset('zhuanjia/style/weui.min.css')}}"/>
    <link rel="stylesheet" href="{{asset('zhuanjia/style/style.css')}}"/>
</head>
<body>
<!--<img src="images/59968281a8569e7ef42672c9bd1bc42.jpg" alt="">-->
<!--头部 搜索框盒子-->
 <!-- <div class="search-box">
    <button class="btn fa fa-angle-left back-icon"></button>
    <span>专家详情</span>
</div> -->
<!--end 头部 搜索框盒子-->
<!--banner-->
<div class="banner"><img src="{{$data->banner}}" alt=""></div>
<!-- end banner-->

    <!--专家介绍-->
    <div class="white-box">
        <div class="box-title clearfix">
            <i class="title-icon text-purple fa fa-bookmark"></i>专家介绍
            <!--<i class="icon-right fa fa-chevron-right"></i>-->
        </div>
        <div class="weui-flex card-box">
            <div><img src="{{object_get($data,'user.avatar')}}" class="list-head-pic"></div>
            <div class="weui-flex__item">
                <ul class="info-list">
                    <li>{{object_get($data,'user.truename')}}</li>
                    <li>擅长领域：{{$data->good_at}}</li>
                    <li>职称：{{$data->rank}}</li>
                </ul>
            </div>
            <div class="level-box">
                <div>
                    <span class="fa fa-star-o" aria-hidden="true"></span><span
                        class="fa fa-star-o" aria-hidden="true"></span><span
                        class="fa fa-star-o" aria-hidden="true"></span><span
                        class="fa fa-star-o" aria-hidden="true"></span><span
                        class="fa fa-star-o" aria-hidden="true"></span>
                </div>
                <div  class="level-on" style="width: 59px;">
                    <span class="fa fa-star" aria-hidden="true"></span><span
                        class="fa fa-star" aria-hidden="true"></span><span
                        class="fa fa-star" aria-hidden="true"></span><span
                        class="fa fa-star" aria-hidden="true"></span><span
                        class="fa fa-star" aria-hidden="true"></span>
                </div>
            </div>
            <!--<div style="position: relative"><a href="" class="weui-btn btn-consult">咨 询</a></div>-->
        </div>
    </div>
    <!-- end 专家介绍-->

    <!--专家详情-->
    <div class="white-box second-box">
        <h4 class="second-title">详情介绍：</h4>
        <p class="text-box">{{$data->contents}}</p>
    </div>
    <!-- end 专家详情-->

<a href="{{url('user/consult-add',$data->id)}}" class="weui-btn btn-consult-normal">咨 询</a>

<!--js-->
<script src="{{asset('zhuanjia/js/jquery-2.2.3.min.js')}}"></script>
<!--<script src="js/weui.min.js"></script>-->
<!--<script src="js/zepto.min.js"></script>-->
<script>
    $(function (){
        //星级控制 0.5颗星width=9px,1颗星width=18px
        var level = "{{$data->point}}";
        var width = level*16.7;        
        $('.level-on').width(width);
    });
        
</script>
</body>
</html>